<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用HTML5结构标签制作布局网页</title>
		<style>
			*{margin: 0;padding: 0;}
			#wrap{width:100%;height: auto;}
			#wrap header{width: 100%;height: 3.75rem;background-color:#FFC0CB;text-align: center;line-height: 3.75rem;font-weight: bold;color:#f00;}
			#wrap main nav{width: 100%;height: 1.875rem;background-color: #90EE90;line-height: 1.875rem;}
			
			#wrap main article::after{content:'';clear: both;display:table;}
			#wrap main article aside {width: 20%;height: 600px;background-color:#87CEEB;text-align: center;line-height: 600px;float: left;}
			#wrap main article section {width: 80%;height: 600px;background-color: #FFFF00;text-align: center;line-height: 600px;float:left;}
			#wrap footer {width: 100%;height: 50px;background-color:#FFC0CB;text-align: center;line-height: 50px;}
		</style>
	</head>
	<body>
		<div id="wrap">
			<header>网站头部,主要包含LOGO或搜索条</header>
			<main>
				<nav>网站主导航菜单</nav>
				<article>
					<aside>侧边栏</aside>
					<section>正文内容</article>
				</article>
			</main>
			<footer>网站底部</footer>
		</div>
	</body>
</html>
